<template>
	<view class="page">
    <view class="top" style="position: relative;">
      <view class="top1"></view>
      <!-- <u-button @click="go" style="width: 100px;position: absolute;top:200px;left: 60vw;" type="primary" size="mini" shape="circle" text="获取积分"></u-button> -->
      <button @click="go" style="width: 100px;position: absolute;top:140px;left: 17vw;background-color: #7f5233;color: antiquewhite;">获取积分</button>
      <view class="top2">
        <img class="img" src="http://127.0.0.1:3000/app/doller.png" alt="">
        <view class="doller">积分余额：{{ user.doller }}</view>
      </view>
    </view>

		<view class="more">
			<view class="userinfo">
				<img class="avatar" :src="user.avatar" alt="" />
				<view class="username">
					<view class="name">
						<span>{{ user.username }}</span>
            <u-icon class="sex" color="#2979ff" size="34" :name="this.sex?'man':'woman'"></u-icon>
					</view>
					<view class="introduce">{{ user.sign }}</view>
				</view>
			</view>
			<view class="more-list">
				<view
					v-for="(item, index) of settings"
					:key="index"
					class="more-item"
					@click="handleButton(item.name)"
				>
					<view class="more-item-name">
						<i class="iconfont more-item-icon" :class="item.icon"></i>
						{{ item.name }}
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

import { baseUrl } from '@/config';

export default {

	data() {
		return {
      id:0,
      user:[],
      userInfo:[],
      sex:0,
			settings: [
				{ name: '回收订单', icon: 'icon-dingdan' },
				{ name: '商品订单', icon: 'icon-dingdan' },
				{ name: '设置', icon: 'icon-shezhi' },
				{ name: '客户问题', icon: 'icon-yonghu' },
			],
		};
	},
onShow(){
  // this.id =  uni.getStorageSync('user').date.id 
  this.id =  uni.getStorageSync('user').data[0].id
	this.getUser()


},
	methods: {
    go(){
      uni.navigateTo({
                  url: "/pages/doller/index"
                })
    },
    getUser(){
      uni.request({
        url: baseUrl+'/v1/user/idSearch', 
        data:{
          id:this.id
        },
        success: (res) => {
          this.user = res.data.data[0]
          if(this.user.sex == "男"){
              this.sex = 1
            }else{
              this.sex= 0
            }
        }
                });
    },
		/**处理按钮*/
		handleButton(name) {
			switch (name) {
				case '设置':
					uni.navigateTo({
						url: '/pages/setting/index'
					});
					break;
				case '商品订单':
					uni.navigateTo({
						url: '/pages/shop-order/index'
					});
					break;
				case '回收订单':
					uni.navigateTo({
						url: '/pages/recycle-order/index'
					});
					break;
				case '客户问题':
					uni.navigateTo({
						url: '/pages/after/index'
					});
					break;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	background: #f2f2f2;
	min-height: 100vh;
	box-sizing: border-box;
	.banner {
		height: 380rpx;
		width: 100%;
	}
	.more-list {
		background: #ffffff;
		border-radius: 12rpx;
	}
	.more {
		margin-top: 100px;
    margin-bottom: 50px;
		padding: 0 32rpx;
		border-radius: 16rpx;
		&-item {
			box-sizing: border-box;
			padding: 24rpx 32rpx;
			border-bottom: 2rpx solid #f2f2f2;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			&-icon {
				font-size: 40rpx;
				color: #4cd964;
				margin-right: 12rpx;
			}
			&-name {
				margin-top: 24rpx;
				font-size: 28rpx;
				color: #404040;
				display: flex;
				align-items: center;
			}
		}
	}
}

.userinfo {
	background: #ffffff;
	padding: 16rpx;
	border-radius: 12rpx;
	display: flex;
	align-items: center;
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.username {
		margin-left: 16rpx;
		.name {
			font-size: 34rpx;
			color: #404040;
			margin-bottom: 16rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			&-vip {
				font-size: 56rpx;
				margin-left: 12rpx;
				color: #f0ad4e;
			}
		}
		.introduce {
			font-size: 30rpx;
			color: #404040;
			font-weight: 600;
		}
	}
}
.top1{
  width: 100vw;
  height: 150px;
  background-color: black;
}
.top2{
  width: 80vw;
  height: 150px;
  background-color: #ffe868;
  margin: -75px auto;
  border-radius: 20px;
  display: flex;

  .img{
    width: 40vw;
    height: 150px;
    border-radius: 20px;
  }
  .doller{
    height: 150px;
    line-height: 150px;
  }
}
</style>
